<template>
    <div>
        <div>
            <img @click="toMainPage" src="../../assets/image/logo.png"
                 style="width: 15%; margin-left: 80px; margin-top: 10px" alt="">
        </div>

        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal"
                 style="position:absolute;right: 0; top: 20px">
            <el-menu-item index="1" @click="toTeacherList">老师</el-menu-item>
            <el-menu-item index="2" @click="toBlogList">博客</el-menu-item>
            <el-menu-item index="3" @click="toCollectBox">知识库</el-menu-item>
            <el-menu-item index="4" style="margin-left: 50px">
                <template slot="title">
                    <el-select style="width: 100px" v-model="value" placeholder="请选择">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </template>
            </el-menu-item>
            <el-menu-item index="5">
                <el-input style="width: 300px" v-model="searchKey" placeholder="请输入搜索内容"></el-input>
            </el-menu-item>
            <el-menu-item index="6">
                <el-button type="primary" plain round>搜索</el-button>
            </el-menu-item>
            <el-menu-item v-if="logined" index="7" @click="toChat">消息</el-menu-item>
            <el-menu-item v-if="!logined" index="8" @click="loginShow=true">登入/注册</el-menu-item>
            <el-submenu index="9" v-if="logined">
                <template slot="title">下午好，{{info.name}}</template>
                <el-menu-item v-if="logined" index="8-1" @click="toHome">个人中心</el-menu-item>
                <el-menu-item v-if="logined" index="8-2" @click="toInformation">修改信息</el-menu-item>
                <el-menu-item index="8-2" @click="logOut">退出登入</el-menu-item>
            </el-submenu>


        </el-menu>

        <el-dialog
                width="400px"
                :visible.sync="loginShow"
                :modal="false"
        >
            <el-input v-model="loginForm.user_id" placeholder="请输入帐号" style="margin-bottom: 20px"></el-input>
            <el-input placeholder="请输入密码" v-model="loginForm.password" show-password
                      style="margin-bottom: 20px"></el-input>
            <el-button style="width: 40%" @click="signIn" type="success" plain>登入</el-button>
            <el-button style="width:40%;float: right" @click="signUp" type="primary" plain>注册</el-button>
        </el-dialog>
        <el-dialog
                width="450px"
                :visible.sync="logupShow"
                :modal="false">
            <el-input v-model="logupForm.name" placeholder="请输入你的昵称" style="margin-bottom: 20px"></el-input>
            <el-input v-model="logupForm.user_id" placeholder="请输入帐号" style="margin-bottom: 20px"></el-input>
            <el-input placeholder="请输入密码" v-model="logupForm.password" show-password
                      style="margin-bottom: 20px"></el-input>
            <el-input placeholder="请再次输入密码" v-model="logupForm.password_again" show-password
                      style="margin-bottom: 20px"></el-input>

            <el-radio v-model="radio" label="0">我是学生</el-radio>
            <el-radio v-model="radio" label="1">我是老师</el-radio>
            <el-select v-if="radio==1" style="width: 100px" v-model="value2" placeholder="请选择">
                <el-option
                        v-for="item in itemList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                >
                </el-option>
            </el-select>


            <el-button style="width:100%;margin-top: 20px" type="success" @click="logup">注册</el-button>
        </el-dialog>
    </div>


</template>

<script>
    import Cookies from "js-cookie";
    import API from "../../api/POST";

    export default {
        name: "cliTitleStudent",
        props: {
            activeIndex: {
                type: String
            }

        },

        data() {
            return {
                radio: '1',
                searchKey: '',
                loginShow: false,
                logupShow: false,
                hasLogin: false,
                logined: false,
                info: '',
                myName: '',
                loginForm: {
                    user_id: '',
                    password: ''
                },
                logupForm: {
                    user_id: '',
                    name: '',
                    password: '',
                    password_again: '',
                },
                value: 'all',
                value2: '',
                options: [
                    {
                        value: 'all',
                        label: '全局'
                    }, {
                        value: 'blog',
                        label: '博客'
                    }, {
                        value: 'colletbox',
                        label: '知识库'
                    }, {
                        value: 'teacher',
                        label: '教师'
                    }
                ],
                itemList: [
                    {value: '语文', label: '语文'},
                    {value: '数学', label: '数学'},
                    {value: '英语', label: '英语'},
                    {value: '物理', label: '物理'},
                    {value: '化学', label: '化学'},
                    {value: '生物', label: '生物'},
                    {value: '历史', label: '历史'},
                    {value: '政治', label: '政治'},
                    {value: '地理', label: '地理'},
                ]

            }
        },
        methods: {
            toTeacherList() {
                this.$router.push({path: `/teacher/teacherList`});
            },
            toBlogList() {
                this.$router.push({path: `/blog/bloglistpage`});
            },
            toCollectBox() {
                this.$router.push({path: `/repository/repositorylist`});
            },
            toHome() {
                this.$router.push({path: `/personal/home`});
            },
            toInformation() {
                console.log(this.info)
                if (this.info.role == 0) {
                    this.$router.push({path: `/information/student`});
                } else {
                    this.$router.push({path: `/information/teacher`});
                }

            },
            toChat(){
                this.$router.push({path: `/chat`});
            },
            signIn() {
                let data = {
                    account: this.loginForm.user_id,
                    password: this.loginForm.password
                };

                API.loginIn(data).then(res => {
                    let info = res;
                    Cookies.set('info', info);
                    this.loginShow = false;
                    this.logined = true;
                    this.info = Cookies.get('info');
                    this.info = JSON.parse(this.info)
                })
            },
            signUp() {
                this.loginShow = false;
                this.logupShow = true;
            },
            //注册
            logup() {
                if (this.logupForm.password == this.logupForm.password_again) {
                    let data = {
                        account: this.logupForm.user_id,
                        password: this.logupForm.password,
                        name: this.logupForm.name,
                        role: this.radio,
                        introduction: '',
                        card_account: ''
                    }
                    if (data.role == 1) {
                        data.teacher_type = this.value2
                    }
                    API.logUp(data).then(res => {
                        if (res.code == 200) {
                            alert(res.message);
                            let info = res
                            Cookies.set('info', info)
                            this.logupShow = false;
                            this.logined = true;
                            this.info = Cookies.get('info');
                            this.info = JSON.parse(this.info)
                        }

                    })
                } else {
                    alert('两次输入的密码不同')
                }
            },
            //退出登入
            logOut() {
                this.logined = false;
                Cookies.set('info', null);
                this.$router.push({path: `/`})
            },
            handleChange() {

            }, toMainPage() {
                this.$router.push({path: `/`})
            }

        },
        created() {
            this.info = Cookies.get('info');

            if (this.info === "null" || this.info == null) {
                this.logined = false
            } else {
                this.info = JSON.parse(this.info);
                this.logined = true
            }
        }
    }
</script>

<style scoped>
    .card1 {
        height: 250px;
        width: 400px;
        margin: 200px auto;
        padding: 20px;
    }

</style>
